<template>
  <div id="barright" style="height: 80vh; width: 100%" ref="right"></div>
</template>

<script>
export default {
  name: "Barright",
  data() {
    return {};
  },
  mounted() {
    this.$echarts.init(document.getElementById("barright"));
    this.init();
  },
  methods: {
    init() {
      let mychart = this.$echarts.init(this.$refs.right);
      var dataAll = [4977, 382, 313, 297, 263, 229, 201, 171, 142, 117];
      //各市的确诊人数的排行版 top10就可以l
      var yAxisData = [
        "成都",
        "内江",
        "宜宾",
        "广安",
        "德阳",
        "绵阳",
        "阿坝",
        "遂宁",
        "泸州",
        "凉山",
      ];
      let option = {
        backgroundColor: "transparent",
        title: [
          {
            text: "Top1成都疫情详情",
            x: "2%",
            y: "1%",
            textStyle: { color: "#fff", fontSize: "14" },
          },
          {
            text: "四川省各市确诊人数Top10",
            x: "40%",
            y: "1%",
            textStyle: { color: "#fff", fontSize: "14" },
          },
          {
            text: "Top2内江疫情详情",
            x: "2%",
            y: "50%",
            textStyle: { color: "#fff", fontSize: "14" },
          },
        ],
        grid: [{ x: "50%", y: "7%", width: "80%", height: "90%" }],
        tooltip: {
          formatter: "{b} ({c})",
        },
        xAxis: [
            {
            axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                    color: "#fff",
                }
            },
            type: "log",
            gridIndex: 0,
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false },
            axisLine: { show: false },
          },
        ],
        yAxis: [
            {
            axisLabel: {
              color: "#ffffff", // 设置坐标轴标签字体颜色
            },
            nameTextStyle: { fontSize: 100 },
            gridIndex: 0,
            interval: 0,
            data: yAxisData.reverse(),
            axisTick: { show: false },
            axisLabel: { show: true },
            splitLine: { show: false },
            axisLine: { show: true, lineStyle: { color: "#6173a3" } },
          },
        ],
        series: [
          {
            name: "Top1成都疫情详情",
            type: "pie",
            radius: "30%",
            center: ["22%", "25%"],
            color: ["#86c9f4", "#4da8ec", "#3a91d2", "#005fa6", "#315f97"],
            data: [
              ////4977,112,73,2403,4
              { value: 4977, name: "累计确诊" },
              { value: 112, name: "新增" },
              { value: 73, name: "新增本土无症状" },
              { value: 2403, name: "累计治愈" },
              { value: 4, name: "累计死亡" },
              //累计确诊、新增、新增本土无症状、累计治愈、累计死亡
              //381,5,54,314,1
            ],
            labelLine: { normal: { show: false } },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} \n ({d}%)",
                  textStyle: { color: "#B1B9D3" },
                },
              },
            },
          },
          {
            name: "Top2内江疫情详情",
            type: "pie",
            radius: "30%",
            center: ["22%", "75%"],
            color: ["#86c9f4", "#4da8ec", "#3a91d2", "#005fa6", "#315f97"],
            labelLine: { normal: { show: false } },
            data: [
              { value: 381, name: "累计确诊" },
              { value: 5, name: "新增" },
              { value: 54, name: "新增本土无症状" },
              { value: 314, name: "累计治愈" },
              { value: 1, name: "累计死亡" },
            ],
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: "{b} \n ({d}%)",
                  textStyle: { color: "#B1B9D3" },
                },
              },
            },
          },
          {
            name: "疫情TOP10",
            type: "bar",
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: "45%",
            itemStyle: { normal: { color: "#86c9f4" } },
            label: {
              normal: {
                show: true,
                position: "right",
                textStyle: { color: "#9EA7C4" },
              },
            },
            data: dataAll.sort(),
            // data: dataAll,
          },
        ],
      };
      mychart.setOption(option);
    },
  },
};
</script>

<style scope></style>
